<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="/web/system/admin/include :: top"></th:block>
    <link rel="stylesheet" th:href="@{/static/plugins/xterm/css/xterm.css}">
    <script type="text/javascript" th:src="@{/static/plugins/xterm/lib/xterm.js}"></script>
    <script type="text/javascript" th:src="@{/static/plugins/xterm-addon/lib/xterm-addon-attach.js}"></script>
</head>
<body>
<!--<button th:onclick="closeA()">关闭</button>-->
<div id="xterm"></div>

<script>
    var socket = new WebSocket("ws://127.0.0.1:8989/ws/ssh");
    //连接打开事件
    socket.onopen = function() {
        console.log("Socket 已打开");
    };
    //收到消息事件
    socket.onmessage = function(msg) {
        console.log(msg);
        term.write(msg.data);//把接收的数据写到这个插件的屏幕上
        if(msg.data.indexOf('连接成功，sessionId=')!=-1){
            var sessionId = msg.data.slice(15);
            console.log(sessionId)
        }else{
            console.log("常规数据："+msg.data);
        }
    };
    //连接关闭事件
    socket.onclose = function() {
        console.log("Socket已关闭");
    };
    //发生了错误事件
    socket.onerror = function() {
        alert("Socket发生了错误");
    }
    var commandKey = [];
    var term = new Terminal({
        rendererType: "canvas", //渲染类型
        rows: parseInt(24), //行数
        cols: parseInt(100), // 不指定行数，自动回车后光标从下一行开始
        convertEol: true, //启用时，光标将设置为下一行的开头
        scrollback: 10, //终端中的回滚量
        disableStdin: false, //是否应禁用输入
        cursorStyle: "underline", //光标样式
        cursorBlink: true, //光标闪烁
        theme: {
            foreground: "yellow", //字体
            background: "#060101", //背景色
            cursor: "help" //设置光标
        }
    });
    // const attachAddon = new AttachAddon(socket);
    // term.loadAddon(attachAddon);
    term.open(document.getElementById("xterm"));
    // 支持输入与粘贴方法
    term.onData(function(key) {
        // console.log("|"+key+"|");
        // commandKey.push(key);
        // console.log(commandKey);
        // term.write(key);
        socket.send(key); //转换为字符串
    });

    term.onLineFeed(function(){
        console.log("执行换行"+JSON.stringify(commandKey))
    });

    term.onTitleChange(function(key){
        console.log("onTitleChange:"+key);
    });

    function closeA(){
        socket.close();
    }


    function runFakeTerminal() {
        if (term._initialized) {
            return;
        }
        term._initialized = true;
        term.prompt = () => {
            term.write('\r\n~$ ');
        };
        term.writeln('Welcome to xterm.js');
        prompt(term);
        term.onKey(e => {
            const printable = !e.domEvent.altKey && !e.domEvent.altGraphKey && !e.domEvent.ctrlKey && !e.domEvent.metaKey;
            if (e.domEvent.keyCode === 13) {
                prompt(term);
            } else if (e.domEvent.keyCode === 8) {
                // Do not delete the prompt
                if (term._core.buffer.x > 2) {
                    // term.write('\b \b')
                }
            } else if (printable) {
                // term.write(e.key);
            }
            console.log(commandKey);
            console.log("key::"+e.domEvent.keyCode);
        });
    }
    function prompt(term) {
        // term.write('\r\n~$ ');
        // term.focus();
    }
    runFakeTerminal();

</script>

<th:block th:include="/web/system/admin/include :: bottom" />
</body>
</html>